<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_Xodyz0',
'ZY_FuWuLiuCheng_1',
'ZY_ChanPinJieJue_2',
'img_WdUXH3',
'ZY_KeHuXinXiChuLi_4',
'ZY_ZhuanYeDeXiaoShouGong_5',
'img_kAAwa6',
'ZY_DingDanShengChan_7',
'ZY_YiFuHe_8',
'img_laceC9',
'ZY_DingDanGenZong_10',
'ZY_ZaiNinDingDanDeQuan_11',
'img_FdJKA12',
'ZY_ZhiJianChuChang_13',
'ZY_QiangLiDeZhiBaoTuan_14',
'img_YSmUh15',
'ZY_ChengShuPinPaiShang_16',
'ZY_GongXiaoWeiZhuDaoDe_17',
'img_ctefu18',
'ZY_PinPaiDaZao_19',
'ZY_MouGeDanPinYuanLiao_20',
'img_gfeE$21',
'ZY_TiePaiDaiGong_22',
'ZY_MouGeDanPinYuanLiao_23'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/swiper.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>body{ background: #f7f7f7; } /* 公司文化 */ .list{ margin: 0 -20px; } .list .item{ width: 25%; padding: 0 20px; text-align: center; box-sizing: border-box; } .list .item .con{ background: #ffffff; padding: 70px 30px 60px; } .list .item .icon{ display: block; margin: 0 auto; width: 70px; } .list .item .name{ color: #23A04D; font-size: 18px; margin: 25px 0 30px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .list .item .desc{ color: #090909; font-size: 15px; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 72px; }</style> 
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${img_Xodyz0.adImg}" class="img zy" data-type="ad" data-id="${img_Xodyz0.adId}"> 
  </div> 
  <div class="tab"> 
   <div class="container"> 
    <span class="tab-item active zy" data-type="ad" data-id="${ZY_FuWuLiuCheng_1.adId}">${ZY_FuWuLiuCheng_1.adTitle}</span> 
    <span class="tab-item zy" data-type="ad" data-id="${ZY_ChanPinJieJue_2.adId}">${ZY_ChanPinJieJue_2.adTitle}</span> 
   </div> 
  </div> 
  <div class="container"> 
   <!-- 服务流程 --> 
   <div class="tab-content company-desc"> 
    <div class="list flex flex-wrap animate__animated animate__fadeInUp"> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_WdUXH3.adImg}" class="icon zy" data-type="ad" data-id="${img_WdUXH3.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_KeHuXinXiChuLi_4.adId}">${ZY_KeHuXinXiChuLi_4.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_ZhuanYeDeXiaoShouGong_5.adId}">${ZY_ZhuanYeDeXiaoShouGong_5.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_kAAwa6.adImg}" class="icon zy" data-type="ad" data-id="${img_kAAwa6.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_DingDanShengChan_7.adId}">${ZY_DingDanShengChan_7.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_YiFuHe_8.adId}">${ZY_YiFuHe_8.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_laceC9.adImg}" class="icon zy" data-type="ad" data-id="${img_laceC9.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_DingDanGenZong_10.adId}">${ZY_DingDanGenZong_10.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_ZaiNinDingDanDeQuan_11.adId}">${ZY_ZaiNinDingDanDeQuan_11.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_FdJKA12.adImg}" class="icon zy" data-type="ad" data-id="${img_FdJKA12.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_ZhiJianChuChang_13.adId}">${ZY_ZhiJianChuChang_13.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_QiangLiDeZhiBaoTuan_14.adId}">${ZY_QiangLiDeZhiBaoTuan_14.adTitle}</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!-- 产品解决 --> 
   <div class="tab-content hide"> 
    <div class="list flex flex-wrap animate__animated animate__fadeInUp"> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_YSmUh15.adImg}" class="icon zy" data-type="ad" data-id="${img_YSmUh15.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_ChengShuPinPaiShang_16.adId}">${ZY_ChengShuPinPaiShang_16.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_GongXiaoWeiZhuDaoDe_17.adId}">${ZY_GongXiaoWeiZhuDaoDe_17.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_ctefu18.adImg}" class="icon zy" data-type="ad" data-id="${img_ctefu18.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_PinPaiDaZao_19.adId}">${ZY_PinPaiDaZao_19.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_MouGeDanPinYuanLiao_20.adId}">${ZY_MouGeDanPinYuanLiao_20.adTitle}</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="con flex flex-column space-center"> 
       <img src="${img_gfeE$21.adImg}" class="icon zy" data-type="ad" data-id="${img_gfeE$21.adId}"> 
       <p class="name zy" data-type="ad" data-id="${ZY_TiePaiDaiGong_22.adId}">${ZY_TiePaiDaiGong_22.adTitle}</p> 
       <p class="desc zy" data-type="ad" data-id="${ZY_MouGeDanPinYuanLiao_23.adId}">${ZY_MouGeDanPinYuanLiao_23.adTitle}</p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://hwfile.csxuncong.com/wantai/pc/js/swiper.min.js"></script>
  <script>
         window.onload = function(){
            var itemEls = document.getElementsByClassName('tab-item');
            var contentEls = document.getElementsByClassName('tab-content');

            var type = getQueryVariable('type') || 0;
            tabChange(type)

            for(var i= 0; i < itemEls.length;i++){
                let index = i;
                itemEls[i].onclick = tabChange.bind(this, index)
            }
            function tabChange(index){
                for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].className="tab-item";
                    contentEls[i].className="tab-content hide";
                }
                itemEls[index].className="tab-item active";
                contentEls[index].className="tab-content";
            }
          function getQueryVariable(variable)
          {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
           }
           return(false);
          }
         }
    </script>
 </body>
</html>